<template>
  <a-table :dataSource="dataSource" :columns="columns" :pagination="false" @resizeColumn="handleResizeColumn"
    ref="tableRef">
    <template #title>{{ title }}</template>
  </a-table>
</template>
<script>
import { Table as ATable } from 'ant-design-vue';
import { defineComponent } from "vue";

export default defineComponent({
  name: "ErTable",
  inject: ["getNode"],
  components: {
    ATable
  },
  data() {
    return {
      dataSource: [],
      columns: [{
        title: '名称',
        dataIndex: 'columnCode',
        key: 'columnCode',
      }, {
        title: '中文名称',
        dataIndex: 'columnName',
        key: 'columnName',
      }, {
        title: '类型',
        dataIndex: 'dataType',
        key: 'dataType',
      },
      ],
      title: '表头'
    };
  },
  methods: {
    handleResizeColumn(w, col) {
      col.width = w;
      this.updateNodeSize();
    },
    initDataFromNode() {
      if (!this.getNode) {
        return;
      }
      const node = this.getNode();
      if (!node) {
        return;
      }
      let nodeData = node.getData();
      if (nodeData) {
        this.title = nodeData.tableInfo.tableName + "(" + nodeData.tableInfo.tableComment + ")";
        this.dataSource = JSON.parse(JSON.stringify(nodeData.tableInfo.columnList));
        if (nodeData.tableInfo.columnsConfig) {
          this.columns = JSON.parse(JSON.stringify(nodeData.tableInfo.columnsConfig));
        }
      }
    },
    updateNodePorts() {
      let node = this.getNode();
      node.removePorts();
      let totalHeight = this.$el.clientHeight;
      let currentY= totalHeight;
      let width = this.$el.clientWidth;
      let rows = this.$el.querySelectorAll('tbody>tr');
      for (let index = rows.length - 1; index >= 0; index--) {
        let row = rows[index];
        console.log("row",row);
        let currentRowHeight = row.clientHeight;
        currentY = currentY - currentRowHeight;
        console.log("currentY", currentY);
        node.addPort({
          id: row.firstElementChild.innerText+'_port1',
          group: 'absolutePostion',
          width: 400,
          height: 20,
          attrs: {
            portBody: {
              width:width,
              height: currentRowHeight,
            },
          },
          args: {
            x: 0,
            y: currentY,
            angle: 0,
          },
        });
      }
    },
    updateNodeSize() {
      let newHeight = this.$el.clientHeight;
      if (!this.getNode) {
        return;
      }
      let node = this.getNode();
      if (!node) {
        return;
      }
      let nodeSize = node.getProp("size");
      if (nodeSize.height != newHeight) {
        node.setProp({ "size": { "height": newHeight, width: nodeSize.width } });
      }
      this.updateNodePorts();
    },
  },

  created() {
    this.initDataFromNode();
  },
  mounted() {
    this.updateNodeSize();
  }
});
</script>
<style>
.ant-table-title {
  padding: 5px;
  background-color: aquamarine;
  font-weight: 900;
  word-break: break-all;
}

.ant-table-thead {
  display: none;
}

.ant-table-thead>tr>th {
  background-color: aqua;

}

.ant-table-thead>tr>th,
.ant-table-tbody>tr>td {
  padding: 5px;
  font-size: 16px;
}
</style>